<!-- 任务三级级页面 -- 任务详情 -- 农资申请 -->
<template>
  <view class="pageView">
    <!-- 农资表单 -->
   <view class="nz-list">
     <view class="list1" @click="nzToggle('bottom')">
       <view class="tit">
         农资申请
       </view>
       <view class="">
         +
       </view>
     </view>
     <view class="list2" v-for="(item, index) in nzData" :key="item.id">
       <view class="tit">
         {{item.name}}
       </view>
       <!-- 计数器 -->
       <view class="content">
              <lxc-count
                  @handleCount="handleCountClick" 
                  :index="index" 
                  :value="item.number"
                  :delayed="100"
                  >
              </lxc-count>
          </view>
     </view>
   </view>
    <!-- 农资弹窗 -->
        <uni-popup ref="popup1" background-color="#fff">
        	<view class="popUpBox">
            <!-- 按钮部分 -->
            <view class="btnBox">
              <view class="Btn">
                全部
              </view>
            </view>
            <!-- 内容部分 -->
            <view class="detailBox">
              <view class="detailList" @click="nzAdd(item)"  v-for="item in nzDataAll" :key="item.id" :class="{ green: !item.isActive}">
                <view class="img">
                  图片
                </view>
                <view class="txt">
                 <view class="txtNum">
                   农资编号：  {{item.id}}
                 </view>
                 <view class="name">
                   农资名称： {{item.name}}
                 </view>
<!--                 <view class="txtState">
                   农机状态：闲置
                 </view> -->
                </view>
              </view>
            </view>
          </view>
        </uni-popup>

<!-- 农机表单 -->
    <view class="nj-list">
      <view class="tit"  @click="njToggle('bottom')">
        <view class="tit1">
          农机申请
        </view>
        <view class="tit1">
          +
        </view>
      </view>
      <view class="content" v-for="item in njData" :key="item.id">
        <view class="name">
          {{item.name}}
        </view>
        <view class="num">
          {{item.number}}
        </view>
      </view>
    </view>
        <!-- 农机弹窗 -->
        <uni-popup ref="popup2" background-color="#fff">
        	<view class="popUpBox">
            <!-- 按钮部分 -->
            <view class="btnBox">
              <view class="Btn">
                全部
              </view>
              <view class="Btn">
                拖拉机
              </view>
              <view class="Btn">
                收割机
              </view>
            </view>
            <!-- 内容部分 -->
            <view class="detailBox">
              <view class="detailList" @click="njAdd(item)"  v-for="item in njDataAll" :key="item.number" :class="{ green: !item.isActive}">
                <view class="img">
                  图片
                </view>
                <view class="txt">
                 <view class="txtNum">
                   农机编号：  {{item.number}}
                 </view>
                 <view class="name">
                   农机名称： {{item.name}}
                 </view>
<!--                 <view class="txtState">
                   农机状态：闲置
                 </view> -->
                </view>
              </view>
            </view>
          </view>
        </uni-popup>
        <!-- 提交按钮 -->
        <view class="submit" @click="submit()">
          提交申请
        </view>
  </view>
</template>

<script>
  import lxcCount from '@/components/lxc-count/lxc-count.vue'
  import {addAgricultureApi, upDataAgricultureApi} from '@/api/task.js'
  export default {  
    components:{
        lxcCount
    },
    data() {
      return {
        type1:'',
        type2:'',
        nzData:[],
        njData:[],
        nzDataAll:[
          {name:'化肥',id:1001,isActive:true,number:0,type:0},
          {name:'农药',id:1002,isActive:true,number:0,type:0},
        ],
        njDataAll:[
          {name:'挖掘机1',number:2001,isActive:true,type:1},
          {name:'挖掘机2',number:2002,isActive:true,type:1},
          {name:'挖掘机3',number:2003,isActive:true,type:1},
        ],
        getApiId:'',
        subRes:[],
        res:[],
        resLength:''
      }
    },
    methods: {
       handleCountClick(val, index) {
                   this.nzDataAll[index]['number'] = val
                   // console.log(this.nzDataAll);
               },
               // 农资弹窗
               nzToggle(type) {
                  				this.type1 = type
                  				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                  				this.$refs.popup1.open(type)
               },
               // 农机弹窗
           	njToggle(type) {
               				this.type2 = type
               				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
               				this.$refs.popup2.open(type)
        		},
            
            // 表单添加农资
            nzAdd(res) {
              // res.isActive = false, 为false（绿色）点击删除，为true（白色）点击添加
              // 删除
              if(res.isActive === false) {
                res.isActive = true
                res.num = 0
                this.nzData = this.nzData.filter(item => item.id !== res.id)
              } else {
                res.isActive = false
                this.nzData.push(res)
              }
            },
            // 表单添加农机
            njAdd(res) {
              // res.isActive = false, 为false（绿色）点击删除，为true（白色）点击添加
              // 删除
              if(res.isActive === false) {
                res.isActive = true
                this.njData = this.njData.filter(item => item.number !== res.number)
              } else {
                res.isActive = false
                this.njData.push(res)
              }
            },
          
            async addAgriculture(data) {
              try {
                  const res = await addAgricultureApi(data);
                  uni.showToast({
                    title: '提交成功',
                    icon: 'success',
                    duration: 2000
                  });
                   setTimeout(() => {
                        uni.navigateBack({
                          // url: `/pages/taskState/taskState?id=${this.getApiId}`,
                         delta: 1,
                           // success: () => {
                           //          const prePage = getCurrentPages()[getCurrentPages().length - 1];
                           //          prePage.onShow();  // 手动调用上一个页面的onShow生命周期函数
                           //        }
                        });
                      }, 2000);
                } catch (error) {
                  // 处理请求失败的情况
                  console.error(error);
                }
            },
            
            // async upDataAgriculture(data) {
            //   const res = await upDataAgricultureApi()
            //   console.log(res,'updata');
            // },

            submit() {
              this.res = [...this.nzData,...this.njData]
              // const res =[...this.nzData,...this.njData]
              // console.log(res);
              for(let i = 0 ;i < this.res.length;i++) {
                this.subRes.push({
                  mid:this.getApiId,
                  name:this.res[i].name,
                  number:this.res[i].number,
                  type:this.res[i].type
                })
              }
              // 页面传递农资农机数组长度大于0走updata接口
             if(this.resLength > 0)  {
               for(let i =0 ; i<this.subRes.length;i++) {
                 this.subRes[i].isUpdate = 1
                 this.addAgriculture(this.subRes[i])
               }
             } else {
               for(let i =0 ; i<this.subRes.length;i++) {
                 this.addAgriculture(this.subRes[i])
               }
             }

            }
    },
    onLoad(query) {
       this.getApiId = query.id;
       this.resLength =query.resLength
     }
  }
</script>

<style scoped lang="scss">
  .pageView {
    background-color: #f5faf9;
    min-height: 100vh;
    padding-top: 10rpx;
  }
  // 农资
  .nz-list {
   width: 100%;
   height: 272rpx;
   background-color: #fff;
   margin-top: 30rpx;
    .list1 {
   display: flex;
   justify-content: space-between;
   border-bottom:1px dashed #ccc ;
   margin: 0 30rpx;
   padding: 20rpx 20rpx;
   font-size: 33rpx;
   font-weight: 700;
  }
   .list2 {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  margin: 20rpx 40rpx;
   }
  }
  // 弹窗
  .popUpBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 600rpx;
  }
  .btnBox {
    width: 30%;
    background-color: #ccc;
    padding: 26rpx 26rpx;
    .Btn {
      width: 140rpx;
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
      border: 3rpx solid #f3f3f3;
      margin: 15rpx 0;
      border-radius: 25rpx;
    }
  }
  .detailBox {
    width: 70%;
    padding: 30rpx 26rpx;
    background-color: #f3f3f3;
    
    // 弹窗内列表点击后样式
    .green {
      background-color: #d9faf5;
      border:5rpx solid #65c4b4;
    }
    
    .detailList {
      width: 100%;
      height: 174rpx;
      display: flex;
      justify-content: space-between;
      box-shadow: 5rpx 5rpx 10rpx rgba(0,0,0,0.3);
      border-radius: 15rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
    }
  }
// 农机列
.nj-list {
  width: 100%;
  height: 272rpx;
  background-color: #fff;
  margin-top: 30rpx;
 .tit {
   display: flex;
   justify-content: space-between;
   border-bottom:1px dashed #ccc ;
   margin: 0 30rpx;
   padding: 20rpx 20rpx;
   font-size: 33rpx;
   font-weight: 700;
 }
 .content {
   display: flex;
   justify-content: space-between;
   font-size: 26rpx;
   margin: 20rpx 40rpx;
 }
}
// 使用人
.user {
  display: flex;
  justify-content: space-between;
  padding: 0 40rpx;
  margin-top: 30rpx;
  height: 90rpx;
  text-align: center;
  line-height: 90rpx;
  background-color: #fff;
  .content {
    color: #65c4b4;
    font-weight: 700;
  }
}
// 按钮
.submit {
  width: 350rpx;
  height: 80rpx;
  border-radius: 50rpx;
  background-color: #65c4b4;
  margin: 50rpx auto 0;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  font-weight: 700;
}
</style>
